<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,user-scalable=no,minimal-ui">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../img/asset-favico.ico">
    <title>支付页面</title>
    <link rel="stylesheet" href="../css/page-health-orderInfo.css"/>
    <link rel="stylesheet" href="../plugins/elementui/index.css"/>
    <script src="../plugins/jquery/dist/jquery.min.js"></script>
    <script src="../plugins/healthmobile.js"></script>
    <script src="../plugins/datapicker/datePicker.js"></script>
    <script src="../plugins/vue/vue.js"></script>
    <script src="../plugins/vue/axios-0.18.0.js"></script>
    <script src="../plugins/elementui/index.js"></script>
    <script src="../plugins/qrcode/qrcodejs-04f46c6/qrcode.js"></script>
    <script src="../plugins/date.js"></script>
    <script>
        var id = getUrlParam("id");
        var pay_url = getUrlParam2();
        var price = getUrlParam("price");

    </script>
</head>
<body data-spy="scroll" data-target="#myNavbar" data-offset="150">
<div id="app" class="app">
    <!-- 页面头部 -->
    <div class="top-header">
        <span class="f-left"><i class="icon-back" onclick="history.go(-1)"></i></span>
        <span class="center">传智健康</span>
        <span class="f-right"><i class="icon-more"></i></span>
    </div>

    <div id="payTitle" style="margin-top: 50px">
        <el-steps :space="300" :active="2" finish-status="success" align-center>
            <el-step title="提交成功"></el-step>
            <el-step title="支付中"></el-step>
            <el-step title="支付成功"></el-step>
        </el-steps>
    </div>

    <span style="font-size: 400%;margin-left: 285px;margin-top: 150px">{{ minutes }}:{{ seconds }}</span>

    <div class="checkout-tit" style="margin-top: 100px;">
        <h1 style="margin-left: 170px">订单提交成功，请您及时付款</h1>
        <span style="margin-left: 170px;font-size: 110%">订单号：{{orderInfo.id}}</span><br>
        <span style="margin-left: 520px;font-size: 110%">￥{{orderInfo.price}}元</span><br>
        <el-button type="primary" style="margin-left: 320px" @click="deleteOrder()">取消订单</el-button>
    </div>

    <div id="qrcode" style="width:300px; height:300px; margin-top:100px;margin-left: 200px"></div>
</div>


<script>


    var vue = new Vue({
        el: '#app',
        data: {
            orderInfo: {
                id: 1,
                price: 0
            }, //订单
            minutes: 14,
            seconds: 59
        },
        mounted() {
            this.add()
        },
        methods: {
            num(n) {
                return n < 10 ? '0' + n : '' + n
            },
            add() {
                var _this = this
                var time = window.setInterval(function () {
                    if (_this.seconds === 0 && _this.minutes !== 0) {
                        _this.seconds = 59
                        _this.minutes -= 1
                    } else if (_this.minutes === 0 && _this.seconds === 0) {
                        _this.seconds = 0
                        window.clearInterval(time)
                    } else {
                        _this.seconds -= 1
                    }
                }, 1000)
            },
            deleteOrder(){
                axios.get("/order/deleteOrderById/" + id).then((res) => {
                    if (res.data.flag) {
                        this.$message.success("订单取消成功");
                        window.location.href = "index.html"
                    } else {
                        this.$message.error("系统繁忙，请稍后重试！");
                    }
                })
            }
        },
        watch: {
            second: {
                handler(newVal) {
                    this.num(newVal)
                }
            },
            minute: {
                handler(newVal) {
                    this.num(newVal)
                }
            }
        },
        computed: {
            second: function () {
                return this.num(this.seconds)
            },
            minute: function () {
                return this.num(this.minutes)
            }
        },

        created() {
            this.orderInfo.id = id;
            this.orderInfo.price = price;
            console.log(id);
            console.log(price);
            console.log(pay_url);
        }
    });


    let qrcode = new QRCode(document.getElementById("qrcode"), {
        width: 100,
        height: 100
    });
    qrcode.makeCode(pay_url);

    // 每间隔五秒查询支付状态
    setInterval(function () {
        axios.get("/order/checkOrderStatus/" + id).then((res) => {
            if (res.data.data) {
                // 支付成功了
                console.log(res.data.data)
                window.location.href = 'orderSuccess.html?id=' + id;
            }
        })
    }, 5000);

    // 如果用户迟迟没有支付... 帅哥课上演示20秒
    setTimeout(function () {
        window.location.href = '/pages/konglong/xiaokonglong.html?type=1';
    }, 60000);


</script>
</body>
</html>
